<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com https://v3.alapi.cn https://www.alapi.cn 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https://v3.alapi.cn https://www.alapi.cn; frame-src https://www.alapi.cn;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>藏头诗生成</title>
        <style>
            .poem-container {
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                background-color: #fff;
                min-height: calc(100vh - 100px);
            }
            .nav {
                background-color: #2c3e50;
                padding: 15px;
                text-align: center;
                margin-bottom: 20px;
            }
            .nav a {
                color: #fff;
                text-decoration: none;
                margin: 0 15px;
                font-size: 16px;
                padding: 8px 15px;
                border-radius: 4px;
                transition: background-color 0.3s;
                display: inline-block;
            }
            .nav a:hover, .nav a.active {
                background-color: #34495e;
            }
            .poem-header {
                text-align: center;
                margin-bottom: 30px;
                padding-bottom: 20px;
                border-bottom: 2px solid #3498db;
            }
            .poem-header h1 {
                color: #2c3e50;
                font-size: 2.5em;
                margin-bottom: 10px;
            }
            .poem-header p {
                color: #7f8c8d;
                font-size: 1.1em;
            }
            .form-container {
                background-color: #f8f9fa;
                padding: 25px;
                border-radius: 8px;
                margin-bottom: 30px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-group label {
                display: block;
                margin-bottom: 8px;
                color: #2c3e50;
                font-weight: bold;
                font-size: 14px;
            }
            .label-with-help {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .help-btn {
                background-color: #3498db;
                color: white;
                border: none;
                border-radius: 4px;
                padding: 4px 12px;
                font-size: 12px;
                cursor: pointer;
                transition: background-color 0.3s;
            }
            .help-btn:hover {
                background-color: #2980b9;
            }
            .token-input-wrapper {
                display: flex;
                gap: 10px;
                align-items: flex-start;
            }
            .token-input-wrapper input {
                flex: 1;
            }
            .modal-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }
            .modal-overlay.show {
                display: flex;
            }
            .modal-content {
                background-color: white;
                border-radius: 8px;
                width: 90%;
                max-width: 600px;
                max-height: 80vh;
                overflow: hidden;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
                display: flex;
                flex-direction: column;
            }
            .modal-header {
                padding: 20px;
                border-bottom: 1px solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .modal-header h2 {
                margin: 0;
                color: #2c3e50;
                font-size: 1.5em;
            }
            .modal-close {
                background: none;
                border: none;
                font-size: 24px;
                color: #999;
                cursor: pointer;
                padding: 0;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                transition: background-color 0.3s;
            }
            .modal-close:hover {
                background-color: #f0f0f0;
                color: #333;
            }
            .modal-body {
                padding: 20px;
                overflow-y: auto;
                flex: 1;
            }
            .modal-body iframe {
                width: 100%;
                height: 500px;
                border: none;
                border-radius: 4px;
            }
            .modal-footer {
                padding: 15px 20px;
                border-top: 1px solid #eee;
                text-align: center;
                background-color: #f8f9fa;
            }
            .modal-footer a {
                color: #3498db;
                text-decoration: none;
                font-weight: bold;
            }
            .modal-footer a:hover {
                text-decoration: underline;
            }
            .form-group input,
            .form-group select {
                width: 100%;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-size: 16px;
                box-sizing: border-box;
                transition: border-color 0.3s;
            }
            .form-group input:focus,
            .form-group select:focus {
                outline: none;
                border-color: #3498db;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            }
            .form-row {
                display: flex;
                gap: 15px;
            }
            .form-row .form-group {
                flex: 1;
            }
            .submit-btn {
                width: 100%;
                padding: 15px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                border-radius: 6px;
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;
                transition: transform 0.2s, box-shadow 0.2s;
                margin-top: 10px;
            }
            .submit-btn:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            }
            .submit-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
            .result-container {
                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                padding: 30px;
                border-radius: 8px;
                margin-top: 20px;
                display: none;
            }
            .result-container.show {
                display: block;
            }
            .result-title {
                font-size: 1.5em;
                color: #2c3e50;
                margin-bottom: 20px;
                text-align: center;
                font-weight: bold;
            }
            .poem-content {
                background-color: white;
                padding: 25px;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                margin-bottom: 20px;
            }
            .poem-text {
                font-size: 20px;
                line-height: 2;
                color: #2c3e50;
                text-align: center;
                font-family: 'KaiTi', '楷体', serif;
                white-space: pre-line;
            }
            .poem-list {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .poem-list li {
                padding: 12px;
                margin-bottom: 10px;
                background-color: white;
                border-radius: 6px;
                border-left: 4px solid #3498db;
                font-size: 18px;
                color: #2c3e50;
                font-family: 'KaiTi', '楷体', serif;
            }
            .error-message {
                background-color: #fee;
                color: #c00;
                padding: 15px;
                border-radius: 6px;
                border-left: 4px solid #f00;
                margin-top: 20px;
                display: none;
            }
            .error-message.show {
                display: block;
            }
            .loading {
                text-align: center;
                padding: 20px;
                color: #666;
                display: none;
            }
            .loading.show {
                display: block;
            }
            .loading::after {
                content: '...';
                animation: dots 1.5s steps(4, end) infinite;
            }
            @keyframes dots {
                0%, 20% { content: '.'; }
                40% { content: '..'; }
                60%, 100% { content: '...'; }
            }
            @media (max-width: 768px) {
                .form-row {
                    flex-direction: column;
                }
                .poem-header h1 {
                    font-size: 2em;
                }
                .nav a {
                    display: block;
                    margin: 5px 0;
                }
                .modal-content {
                    width: 95%;
                    max-height: 90vh;
                }
                .modal-body iframe {
                    height: 400px;
                }
                .token-input-wrapper {
                    flex-direction: column;
                }
                .help-btn {
                    margin-top: 8px;
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="index.html">首页</a>
            <a href="about.html">关于我们</a>
            <a href="poem.html" class="active">藏头诗</a>
            <a href="translate.html">翻译</a>
            <a href="express.html">快递查询</a>
            <a href="ip.html">IP查询</a>
            <a href="workday.html">工作日查询</a>
            <a href="network.html">网络状态</a>
            <a href="vibrate.html">震动功能</a>
            <a href="battery.html">电池状态</a>
        </div>
        <div class="poem-container">
            <div class="poem-header">
                <h1>藏头诗生成</h1>
                <p>输入关键字，生成优美的藏头、藏尾、藏中等诗词</p>
            </div>

            <div class="form-container">
                <form id="poem-form">
                    <div class="form-group">
                        <label for="token" class="label-with-help">
                            <span>API Token *</span>
                            <button type="button" class="help-btn" onclick="openTokenModal()">获取 Token</button>
                        </label>
                        <div class="token-input-wrapper">
                            <input type="text" id="token" name="token" placeholder="请输入API Token" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="keyword">关键字 *</label>
                        <input type="text" id="keyword" name="keyword" placeholder="请输入2-8个字的藏字内容，如：我喜欢你" required maxlength="8" minlength="2">
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="num">诗句格式</label>
                            <select id="num" name="num">
                                <option value="5">五言诗</option>
                                <option value="7">七言诗</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="type">藏头位置</label>
                            <select id="type" name="type">
                                <option value="1">藏头</option>
                                <option value="2">藏尾</option>
                                <option value="3">藏中</option>
                                <option value="4">递增</option>
                                <option value="5">递减</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="rhyme">押韵类型</label>
                            <select id="rhyme" name="rhyme">
                                <option value="1">双句一压</option>
                                <option value="2">双句押韵</option>
                                <option value="3">一三四押</option>
                            </select>
                        </div>
                    </div>

                    <button type="submit" class="submit-btn" id="submit-btn">生成藏头诗</button>
                </form>

                <div class="loading" id="loading">正在生成诗词</div>
                <div class="error-message" id="error-message"></div>
            </div>

            <div class="result-container" id="result-container">
                <div class="result-title">生成的诗词</div>
                <div class="poem-content">
                    <div class="poem-text" id="poem-text"></div>
                </div>
                <ul class="poem-list" id="poem-list"></ul>
            </div>
        </div>

        <!-- Token 获取弹窗 -->
        <div class="modal-overlay" id="token-modal" onclick="closeTokenModal(event)">
            <div class="modal-content" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h2>获取 API Token</h2>
                    <button class="modal-close" onclick="closeTokenModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <p style="margin-bottom: 15px; color: #666;">
                        请在下方页面注册并获取您的 API Token，然后将 Token 复制到输入框中。
                    </p>
                    <iframe src="https://www.alapi.cn/aff/nutpi" id="token-iframe"></iframe>
                </div>
                <div class="modal-footer">
                    <p style="margin: 0; color: #666;">
                        如果页面无法加载，请
                        <a href="https://www.alapi.cn/aff/nutpi" target="_blank">点击这里在新窗口打开</a>
                    </p>
                </div>
            </div>
        </div>

        <script src="cordova.js"></script>
        <script src="js/poem.js"></script>
        <script>
            // 打开 Token 获取弹窗
            function openTokenModal() {
                document.getElementById('token-modal').classList.add('show');
                document.body.style.overflow = 'hidden'; // 禁止背景滚动
            }

            // 关闭 Token 获取弹窗
            function closeTokenModal(event) {
                if (event && event.target !== event.currentTarget) {
                    return; // 如果点击的是弹窗内容，不关闭
                }
                document.getElementById('token-modal').classList.remove('show');
                document.body.style.overflow = ''; // 恢复背景滚动
            }

            // ESC 键关闭弹窗
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    const modal = document.getElementById('token-modal');
                    if (modal.classList.contains('show')) {
                        closeTokenModal();
                    }
                }
            });
        </script>
    </body>
</html>

